<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script>
        function ask(){
            //根据元素的id，得到该元素的对象
            var spanObj = document.getElementById("infoSpan");
            //设置标签对象中间的文本
            spanObj.innerHTML = "两头牛";
            //设置标签对象的样式
            spanObj.style.color = "#FF0000";
            //把标签对象的背景设置为黄色
            //在js中，标识符只允许字母、数字、下划线、$。
            //如果样式中有-，则去掉-，采用驼峰命名
            spanObj.style.backgroundColor = "yellow";
        }

        // function imageChange(){
        //     //得到下拉框对象
        //     var selectObj = document.getElementById("imageSelect");
        //     //得到下拉框的值，也就是选中选项的value值
        //     //弹出对话框 ，会有阻塞
        //     // alert(selectObj.value);
        //     //在浏览器控制台显示，没有阻塞
        //     //  console.log(selecObj.value);
        //
        //     //得到图片对象
        //     var imgObj = document.getElementById("faceImg");
        //     imgObj.src = selectObj.value;
        // }

        //定义js形参变量时，直接写形参变量名，不能加类型
        function imageChange(selectObj){
            document.getElementById("faceImg").src = selectObj.value;
            var bodyObj = document.getElementById("htmlBody");
            bodyObj.style.backgroundImage = "url(" + selectObj.value + ")";
        }

    </script>

</head>
<body id="htmlBody">
    <!--js中的this和java中的this类似。js中的this写在哪个元素中，代表哪个元素的对象-->
    <input type="button" value="一头公牛加一头母牛是哪三个字？" onclick="ask()" />
    <span id="infoSpan"></span><br><br>

    <img src="../img/3.jpg" id="faceImg" width="300" height="300"><br>
    <!--onchange表示在下拉框选项变化时触发-->
    <select onchange="imageChange(this.value)" id="imageSelect">
        <option value="../img/3.jpg">春香</option>
        <option value="../img/5.jpg">夏香</option>
        <option value="../img/6.jpg">秋香</option>
        <option value="../img/8.jpg">冬香</option>
    </select>


</body>
</html>